<template>
    <div class="nav-container">
        <nav>
            <div class="links" :class="{
                active: item.name === route.name
            }" v-for="(item, index) in navItems" :key="index">
                <IconFon :icon="item.icon"></IconFon>
                <router-link :to="{ name: item.name }">{{ item.title }}</router-link>
            </div>
        </nav>
    </div>
</template>

<script setup>
import IconFon from '@/components/IconFon/index.vue';
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const navItems = reactive([
    {
        name: "Home",
        title: "首页",
        icon: "home",
        exact: true,
    },
    {
        name: "Blog",
        title: "文章",
        icon: "blog",
        exact: false, //不精准选中
    },
    {
        name: "About",
        title: "关于我",
        icon: "about",
        exact: true,
    },
    {
        name: "Project",
        title: "项目&效果",
        icon: "code",
        exact: true,
    },
    {
        name: "Message",
        title: "留言板",
        icon: "chat",
        exact: true,
    },
])
</script>

<style  scoped>
.links {
    padding: 0 50px;
    height: 45px;
    display: flex;
    align-items: center;
    color: #b4b8bc;
    cursor: pointer;
}

.links:hover {
    color: #fff;
}

.links.active {
    background-color: #2f2f2f;
}
</style>